<template>
  <div class="app-container1">
    <el-treeselect
      ref="deptTreeSelect"
      :multiple="true"
      v-model="treeDefaultValue"
      :remoteSearch="false"
      :search="true"
      placeholder="请输入搜索内容"
      :data="deptOptions"
      :props="treeSelectprops"
      :isEdit="false"
      :clickParent="false"
      :disabled="false"
      @treeNodeCheckFun="treeNodeCheckFun"
      @nodeClick="nodeClick"
    >
    </el-treeselect>
  </div>

</template>

<script>
  // vue
  import elTreeselect from '@/components/ElementTreeSelectSealing/el-tree-select';
  // api
  import { treeselect } from "@/api/system/dept";
  export default {
    name: 'dept-tree-mutil-select',
    data () {
      return {
        // 部门树
        deptOptions: undefined,
        treeSelectprops: {
          children: 'children',
          label: 'label',
          value: 'id'// 选中之后的id名称
        },
        treeSelectValue: 'zzz',
        // treeDefaultValue: [1,2,3],
        treeDefaultValue: undefined
      }
    },
    created() {
    },
    components: {elTreeselect},
    methods: {
      /** 查询部门下拉树结构 */
      getDeptTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      setCheckedKeys(idsArr){
        this.$nextTick(() => {
          this.$refs.deptTreeSelect.setCheckedKeys(idsArr)
          // this.$refs.deptTreeSelect.defaultChecked = idsArr
        })
      },
      treeNodeCheckFun(ids, checks) {
        this.$emit('setDept', ids)
        /*
         console.log(JSON.stringify(ids));
         console.log(checks);
         */
      },
      nodeClick(data, node, tree) {
        /*
          树菜单不允许被点击叶单位，故此不触发
          console.log("data============ " + JSON.stringify(data));
        console.log(node);
        console.log(tree);
         */
      },
    }
  }
</script>

<style scoped>
  .app-container{

  }
</style>
